<template>
	<view class="amap-page-container">
		<el-amap vid="container" class="amap-demo">
		</el-amap>
		<view>
		    <button class="cu-btn bg-olive"  @click="resumeAnimation()">继续动画</button>
		    <button class="cu-btn bg-red"  @click="stopAnimation()">停止动画</button>
		    <button class="cu-btn bg-olive"  @click="startAnimation()">开始动画</button>
		    <button class="cu-btn bg-red"  @click="pauseAnimation()">暂停动画</button>
			<button class="cu-btn bg-black round lg car-jd"  >司机接单</button>
		</view>
	</view>
</template>
<script>
	// import  '../../amap/main.js';
	// import VueAMap from 'vue-amap';
	// import '../../amap/maps.js';
	// import '../../amap/index.js';
	import {
		AMapManager,
		lazyAMapApiLoaderInstance
	} from 'vue-amap';

let amapManager = new AMapManager()
	// Vue.use(VueAMap);
	// window.VueAMap.initAMapApiLoader({
 //      key: 'YOUR_KEY',
 //      plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor'],
 //      // 默认高德 sdk 版本为 1.4.4
 //      v: '1.4.4'
 //    });
	export default {
		name: "Map",
		data() {
			return {
				map: null,
				zoom: null,
				polyline:null,
				amapManager,
				marker:[[116.478935,39.997761],[116.478939,39.997825],[116.478912,39.998549],[116.478912,39.998549],[116.478998,39.998555],
				[116.478998,39.998555],[116.479282,39.99856],[116.479658,39.998528],
				[116.480151,39.998453],[116.480784,39.998302],[116.480784,39.998302],
				[116.481149,39.998184],[116.481573,39.997997],[116.481863,39.997846],
				[116.482072,39.997718],[116.482362,39.997718],[116.483633,39.998935],
				[116.48367,39.998968],[116.484648,39.999861]],
				lineArr:[[116.478935,39.997761],[116.478939,39.997825],[116.478912,39.998549],[116.478912,39.998549],[116.478998,39.998555],
				[116.478998,39.998555],[116.479282,39.99856],[116.479658,39.998528],
				[116.480151,39.998453],[116.480784,39.998302],[116.480784,39.998302],
				[116.481149,39.998184],[116.481573,39.997997],[116.481863,39.997846],
				[116.482072,39.997718],[116.482362,39.997718],[116.483633,39.998935],
				[116.48367,39.998968],[116.484648,39.999861]],
				firstArr:'',
				markerSpeed:200
			}
		},
		mounted() {
			  setTimeout(() => {
				  	uni.request({
				  		url: 'http://restapi.amap.com/v3/ip?key=1f5cfb770d01a1a0d8289169188de6b3',
				  		success: res => {
				  			if (res.data.info) {}	
				  					this.firstArr = res.data.rectangle;
				  			},
					})
				this.initMap();
			    }, 1000);
	},
	methods: {
		//初始化地图
		  initMap() {
		      this.map = new AMap.Map("container", {
		        resizeEnable: true, //窗口大小调整
		        center: this.firstArr, //中心 
		        zoom: 22
		      });
		    //   this.marker = new AMap.Marker({
		    //     map: this.map,
		    //     position: this.firstArr,
		    //     icon: "https://webapi.amap.com/images/car.png",
		    //     offset: new AMap.Pixel(-26, -13), //调整图片偏移
		    //     autoRotation: true, //自动旋转
		    //     angle: -90 //图片旋转角度
		    //   });
		    },
		// 	//初始化轨迹
		// 	initroad() {
		// 	      //绘制还未经过的路线
		// 	      this.polyline = new AMap.Polyline({
		// 	        map: this.map,
		// 	        path: this.lineArr,
		// 	        showDir: true,
		// 	        strokeColor: "#28F", //线颜色--蓝色
		// 	        // strokeOpacity: 1,     //线透明度
		// 	        strokeWeight: 6 //线宽
		// 	        // strokeStyle: "solid"  //线样式
		// 	      });
		// 	      //绘制路过了的轨迹
		// 	      var passedPolyline = new AMap.Polyline({
		// 	        map: this.map,
		// 	        strokeColor: "#AF5", //线颜色-绿色
		// 	        // path: this.lineArr,
		// 	        // strokeOpacity: 1,     //线透明度
		// 	        strokeWeight: 6 //线宽
		// 	        // strokeStyle: "solid"  //线样式
		// 	      });
		// 	      this.marker.on("moving", e => {
			        
		// 	        passedPolyline.setPath(e.passedPath);
		// 	      });
		// 	      this.map.setFitView(); //合适的视口
		// 	    },
		//     startAnimation() {
		// 		this.initroad();
		//         this.marker.moveAlong(this.lineArr,200);
		//     },
		
		//     pauseAnimation() {
		//         this.marker.pauseMove();
		//     },
		
		//     resumeAnimation() {
		//         this.marker.resumeMove();
		//     },
		
		//     stopAnimation() {
		//         this.marker.stopMove();
		//     },
		// 	getVal() {
		// 		return this.firstArr
		// 	}
	},
			
}
</script>

<style>
	.amap-demo {
		height: 90vh;
	}

	.search-box {
		position: absolute;
		top: 75px;
		left: 45px;
	}

	.amap-page-container {
		position: relative;
	}
	    .loadingTip {
	        position: absolute;
	        z-index: 10;
	        top: 0;
	        left: 0;
	        padding: 3px 10px;
	        background: red;
	        color: #fff;
	        font-size: 14px;
	    }
		.car-jd{
			top:10px;
			left: 160px;
			right: 0;
		}
</style>
